<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /* 
            目前为止学习的大部分的api 都是 同步 

            延时器和 定时器 --异步执行的 （异步任务）
                一般情况 比较消耗时间的api（方法）都会设计的异步（异步的任务的都会交给浏览器）

             queueMicrotask   -异步任务（相当于延时0ms ）

                异步--一般相对于同步都是最后执行的


                异步任务
                    -- 宏任务  延时器和 定时器
                    -- 微任务  queueMicrotask

           事件循环--      先执行 一个宏任务，再 执行 正在等待的所有微任务（清空微任务队列）
                    上面的过程 不停的在js中重复   

                    整体的js代码第一次执行的时候，算为 依次 宏任务 


        
        */

        /* 
            webAPI （做异步任务，异步任务做完以后就会方到任务队列里面排队）

            任务队列
                宏任务队列  
                    () => {
                        console.log(2);
                         queueMicrotask(function () {
                            console.log('异步的执行的  7');
                            // 异步--一般相对于同步都是最后执行的
                        });
                    }
                微任务队列
                        function() { log(4) }
                        function() {
                                 log(5)
                                setTimeout(() => {
                                    console.log(6);
                                }, 0);
                                
                        },  




            第一次   事件循环
                先执行 一个宏任务
                        (遇到同步就执行输入，遇到异步，给webAPI，webAPI 里面执行结束，会进入相应的异步队列排队（微任务就进入微任务队列，宏任务就会宏任务队列）)
                        再 执行 正在等待的所有微任务（清空微任务队列），如果一个微任务里面执行的时候有可能还会有宏或者微任务（ (遇到同步就执行输入，遇到异步，给webAPI，webAPI 里面执行结束，会进入相应的异步队列排队（微任务就进入微任务队列，宏任务就会宏任务队列）)）


                1-先宏 --整个脚步 当做宏任务
                    log（1）--同步 直接输出

                     setTimeout(() => {
                        console.log(2);
                    }, 0);
                    异步宏任务--等待 0ms-- 给了webAPI（浏览器）--》直接宏任务排队


                     queueMicrotask(function () {
                        console.log('异步的执行的  4');
                        // 异步--一般相对于同步都是最后执行的
                     });
                    异步微任务--等待 0ms-- 给了webAPI（浏览器）--》直接微任务排队

                       queueMicrotask(function () {
                        console.log('异步的执行的  5');
                        // 异步--一般相对于同步都是最后执行的
                     });
                    异步微任务--等待 0ms-- 给了webAPI（浏览器）--》直接微任务排队


                   console.log(3); 同步的直接执行


              2-      再 执行 正在等待的所有微任务（清空微任务队列）
                 log（4）  
                 log(5)
                  setTimeout(() => {
                                    console.log(6);
                  }, 0);

              
            webAPI （做异步任务，异步任务做完以后就会方到任务队列里面排队）
            任务队列
                宏任务队列  
                    () => {
                        console.log(2);
                         queueMicrotask(function () {
                            console.log('异步的执行的  7');
                            // 异步--一般相对于同步都是最后执行的
                        });
                    }
                    () => {
                                    console.log(6);
                    }

                微任务队列
                        
  
            第二次   事件循环
                1-先执行 一个宏任务，再 执行 正在等待的所有微任务（清空微任务队列）   
                    只有一个宏任务 -- 直接  执行  log(2)
                    

                      任务队列
                宏任务队列  
                  
                    () => {
                                    console.log(6);
                    }

                微任务队列    


                下次事件循环
                    宏任务

                    log（6）
                    

                 1 3 4 5 2 7  6


                 


        */
        console.log(1);

        // 延时器 里面的 那个函数 1000毫秒以后执行（1秒），是异步执行
        setTimeout(() => {
            console.log(2);
            queueMicrotask(function () {
                console.log('异步的执行的  7');
                // 异步--一般相对于同步都是最后执行的
            });
        }, 0);

        queueMicrotask(function () {
            console.log('异步的执行的  4');
            // 异步--一般相对于同步都是最后执行的
        });
        queueMicrotask(function () {
            console.log('异步的执行的  5');
            // 异步--一般相对于同步都是最后执行的
            setTimeout(() => {
                console.log(6);
            }, 0);
        });


        console.log(3);





        // setTimeout(() => {
        //     console.log(10000);
        // }, 0);
        // console.log(999);

    </script>

</body>

</html>